<template>
    <div class="">
        <div class=" relative" :key="valumapkey">
            <el-dropdown>
                <div class="flex-c rounded-[4px] bg-[#0b2241] py-[4px] px-[8px] gap-[5px]">
                    <div><img class="w-[15px] h-[15px] relative top-[1px]" :src="getimg()" alt=""> </div>
                    <div>地图主题 </div>
                    <div><el-icon size="14" color="#fff">
                            <ArrowUp color="#fff" />
                        </el-icon> </div>

                </div>

                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item @click="useDataDashboardThemeStore.setMapTheme(item.value), valumapkey++"
                            v-for="item in mamthem" :key="item.id">
                            <span class="block w-[15px] h-[15px] mr-[5px]"><img class="w-[15px] h-[15px]"
                                    :src="item.img" alt=""></span><span class="leading-[20px]" :class="item.value == useDataDashboardThemeStore.getMapTheme() ? 'text-[#396adb]' : ''">{{ item.name }}</span>
                        </el-dropdown-item> 
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { useDataDashboardThemeStoreHook } from '@/store/modules/data-dashboard-theme'
const useDataDashboardThemeStore = useDataDashboardThemeStoreHook()
const valumapkey = ref(0)
import { ArrowUp } from '@element-plus/icons-vue'
import blue from "@/assets/screenimg/mapimg/blue.png"
import darkblue from "@/assets/screenimg/mapimg/darkblue.png"
import grey from "@/assets/screenimg/mapimg/grey.png"
// normal （标准）、dark（幻影黑）、light（ 月光银）、whitesmoke（远山黛）、fresh（草色青）、grey（雅士灰）、graffiti（涂鸦）、macaron（马卡龙）、blue（靛青蓝）、darkblue（极夜蓝）、wine（酱籽）
const mamthem = ref([
    {
        id: 6,
        name: '雅士灰',
        value: 'grey',
        img: grey
    },
    {
        id: 9,
        name: '靛青蓝',
        value: 'blue',
        img: blue
    },
    {
        id: 10,
        name: '极夜蓝',
        value: 'darkblue',
        img: darkblue
    },
])
const getimg = () => {
    if (useDataDashboardThemeStore.getMapTheme() == 'grey') {
        return grey
    } else if (useDataDashboardThemeStore.getMapTheme() == 'blue') {
        return blue
    } else if (useDataDashboardThemeStore.getMapTheme() == 'darkblue') {
        return darkblue
    }
}
</script>